<template>
	<view class="container">
		<!-- <uni-section title="通栏卡片" type="line"> -->
		<uni-card v-for="item in list" :key="item.cid" :title="item.name" :isFull="true" :sub-title="item.time"
			:thumbnail="item.imgUrl" @longpress.stop="handleLongPress" @click="handleClick(item.id)">
			<view slot="actions" v-if="showSelection" class="checkbox-container">
				<checkbox class="checkbox" :value="item.cid" :checked="selectedItems.includes(item.cid)"
					@click.stop="toggleSelection(item.cid)" />
			</view>
		</uni-card>
		<!-- 操作按钮 -->
		<view v-if="showSelection" class="delete-button-container">
			<button type="default" class="cancel-button" @click="cancelSelection">取消删除</button>
			<button type="warn" class="delete-button" @click="confirmDelete">删除选中</button>
		</view>
	</view>
</template>

<script>
	import {
		commodityList
	} from '@/utils/index';
	export default {
		data() {
			return {
				avatar: '/static/img/index-img/9.jpg',
				list: [],
				showSelection: false, // 是否显示勾选框
				selectedItems: [], // 被选中的商品ID
				clickTimeout: null, // 用于区分长按和点击的定时器
				commodityList: commodityList, //商品列表
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			// 初始化
			init() {
				let historyList = uni.getStorageSync('historyList');
				if (!historyList) {
					historyList = [];
				} else {
					historyList = JSON.parse(historyList);
				}
				historyList.forEach((x, i) => {
					this.commodityList.forEach((y, j) => {
						if (x.id == y.id) {
							x.imgUrl = y.imgUrl
							x.name = y.name
							x.cid = i + 1
						}
					})
				})
				this.list = historyList
			},
			// 处理长按
			handleLongPress(id) {
				clearTimeout(this.clickTimeout); // 清除点击的延时
				this.showSelection = true; // 显示选择框
			},
			// 处理单击
			handleClick(id) {
				// 设置一个定时器延时触发点击操作
				this.clickTimeout = setTimeout(() => {
					if (!this.showSelection) {
						this.goDetail(id);
					}
				}, 200); // 延时 200ms 判断为单击
			},
			goDetail(id) {
				uni.navigateTo({
					url: `/pages/details/details?id=${id}`
				});
			},
			// 长按显示勾选框
			showCheckboxes() {
				this.showSelection = true;
			},
			// 切换选中状态
			toggleSelection(id) {
				console.log("改值了")
				if (this.selectedItems.includes(id)) {
					this.selectedItems = this.selectedItems.filter(itemId => itemId !== id);
				} else {
					this.selectedItems.push(id);
				}
				console.log("this.selectedItems", this.selectedItems)
			},
			// 删除选中项
			confirmDelete() {
				if (this.selectedItems.length === 0) {
					uni.showToast({
						title: '未选中任何商品',
						icon: 'none'
					});
					return;
				}
				uni.showModal({
					title: '提示',
					content: '是否确认删除选中商品？',
					success: res => {
						if (res.confirm) {
							// 删除选中的商品
							this.list = this.list.filter(item => !this.selectedItems.includes(item.cid));
							// 重置选中状态
							this.selectedItems = [];
							this.showSelection = false;
							this.list.forEach(item=>{
								delete item.cid
								delete item.imgUrl
								delete item.name
							})
							uni.setStorageSync('historyList', JSON.stringify(this.list));
							this.init()
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});
						}
					}
				});
			},
			// 取消选择
			cancelSelection() {
				this.resetSelection();
			},
			// 重置选中状态
			resetSelection() {
				this.selectedItems = [];
				this.showSelection = false;
			}
		}
	}
</script>

<style scoped>
	.container {
		overflow: hidden;
	}

	/* 	:deep .uni-card__content {
		display: none;
	} */
	:deep .uni-card .uni-card__content {
		padding: 0 !important;
	}

	.custom-cover {
		flex: 1;
		flex-direction: row;
		position: relative;
	}

	.cover-content {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 40px;
		background-color: rgba($color: #000000, $alpha: 0.4);
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 15px;
		font-size: 14px;
		color: #fff;
	}

	.card-actions {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		height: 45px;
		border-top: 1px #eee solid;
	}

	.card-actions-item {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.card-actions-item-text {
		font-size: 12px;
		color: #666;
		margin-left: 5px;
	}

	.cover-image {
		flex: 1;
		height: 150px;
	}

	.no-border {
		border-width: 0;
	}


	.checkbox-container {
		position: absolute;
		right: 10px;
		top: 10px;
	}

	.checkbox {
		width: 20px;
		height: 20px;
	}

	.delete-button-container {
		position: fixed;
		bottom: 20px;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.delete-button {
		width: 120px;
		height: 40px;
		background-color: red;
		color: white;
		font-size: 16px;
		border-radius: 5px;
		text-align: center;
		line-height: 40px;
	}
</style>